
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-wenti"></i>
                    <div class="name">问题</div>
                    <div class="fontclass">.icon-wenti</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liwu"></i>
                    <div class="name">礼物</div>
                    <div class="fontclass">.icon-liwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paixu"></i>
                    <div class="name">排序</div>
                    <div class="fontclass">.icon-paixu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xueqiu"></i>
                    <div class="name">雪球</div>
                    <div class="fontclass">.icon-xueqiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangxingweixuanzhong"></i>
                    <div class="name">方形未选中</div>
                    <div class="fontclass">.icon-fangxingweixuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangxingxuanzhongfill"></i>
                    <div class="name">方形选中-fill</div>
                    <div class="fontclass">.icon-fangxingxuanzhongfill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangxingxuanzhong"></i>
                    <div class="name">方形选中</div>
                    <div class="fontclass">.icon-fangxingxuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi2fill"></i>
                    <div class="name">关闭2-fill</div>
                    <div class="fontclass">.icon-guanbi2fill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi2"></i>
                    <div class="name">关闭2</div>
                    <div class="fontclass">.icon-guanbi2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiahao1"></i>
                    <div class="name">加号1</div>
                    <div class="fontclass">.icon-jiahao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuanxingweixuanzhong"></i>
                    <div class="name">圆形未选中</div>
                    <div class="fontclass">.icon-yuanxingweixuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuanxingxuanzhongfill"></i>
                    <div class="name">圆形选中-fill</div>
                    <div class="fontclass">.icon-yuanxingxuanzhongfill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuanxingxuanzhong"></i>
                    <div class="name">圆形选中</div>
                    <div class="fontclass">.icon-yuanxingxuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxiang"></i>
                    <div class="name">分享</div>
                    <div class="fontclass">.icon-fenxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengduo"></i>
                    <div class="name">更多</div>
                    <div class="fontclass">.icon-gengduo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liuyan"></i>
                    <div class="name">留言</div>
                    <div class="fontclass">.icon-liuyan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-saoma"></i>
                    <div class="name">扫码</div>
                    <div class="fontclass">.icon-saoma</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouyefill"></i>
                    <div class="name">首页-fill</div>
                    <div class="fontclass">.icon-shouyefill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodefill"></i>
                    <div class="name">我的-fill</div>
                    <div class="fontclass">.icon-wodefill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wode"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.icon-wode</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangshang2"></i>
                    <div class="name">向上2</div>
                    <div class="fontclass">.icon-xiangshang2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangxia2"></i>
                    <div class="name">向下2</div>
                    <div class="fontclass">.icon-xiangxia2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangyou1"></i>
                    <div class="name">向右1</div>
                    <div class="fontclass">.icon-xiangyou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangzuo1"></i>
                    <div class="name">向左1</div>
                    <div class="fontclass">.icon-xiangzuo1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bianjibijishishouxie"></i>
                    <div class="name">编辑 笔 记事 手写</div>
                    <div class="fontclass">.icon-bianjibijishishouxie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianjie"></i>
                    <div class="name">简介</div>
                    <div class="fontclass">.icon-jianjie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanhui"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-fanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu3"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-kefu3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jian"></i>
                    <div class="name">减</div>
                    <div class="fontclass">.icon-jian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-c20_show"></i>
                    <div class="name">散点视图</div>
                    <div class="fontclass">.icon-c20_show</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-test"></i>
                    <div class="name">收益</div>
                    <div class="fontclass">.icon-icon-test</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenhao"></i>
                    <div class="name">问号</div>
                    <div class="fontclass">.icon-wenhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhibo-copy"></i>
                    <div class="name">直播</div>
                    <div class="fontclass">.icon-zhibo-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianjie"></i>
                    <div class="name">链接 (1)</div>
                    <div class="fontclass">.icon-lianjie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-banbenhao"></i>
                    <div class="name">版本号</div>
                    <div class="fontclass">.icon-banbenhao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pengyouquan"></i>
                    <div class="name">朋友圈</div>
                    <div class="fontclass">.icon-pengyouquan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tubiaozhizuomoban"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-tubiaozhizuomoban</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-combine-manage"></i>
                    <div class="name">组合管理</div>
                    <div class="fontclass">.icon-combine-manage</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jijintakaihu"></i>
                    <div class="name">基金ta开户</div>
                    <div class="fontclass">.icon-jijintakaihu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoucang"></i>
                    <div class="name">收藏</div>
                    <div class="fontclass">.icon-shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-feiji"></i>
                    <div class="name">飞机</div>
                    <div class="fontclass">.icon-feiji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu2"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-kefu2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bofang"></i>
                    <div class="name">播放</div>
                    <div class="fontclass">.icon-bofang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-_gegujiaoyi"></i>
                    <div class="name">2_1个股交易</div>
                    <div class="fontclass">.icon-_gegujiaoyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibo"></i>
                    <div class="name">微博 (1)</div>
                    <div class="fontclass">.icon-weibo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-caizhangdie_link"></i>
                    <div class="name">猜涨跌_link</div>
                    <div class="fontclass">.icon-caizhangdie_link</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shiyan"></i>
                    <div class="name">实验</div>
                    <div class="fontclass">.icon-shiyan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shiyanweixuanzhong"></i>
                    <div class="name">实验未选中</div>
                    <div class="fontclass">.icon-shiyanweixuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouyi"></i>
                    <div class="name">收益</div>
                    <div class="fontclass">.icon-shouyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodexuanzhong1"></i>
                    <div class="name">我的选中</div>
                    <div class="fontclass">.icon-wodexuanzhong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shiyanshixuanzhong1"></i>
                    <div class="name">实验室 选中</div>
                    <div class="fontclass">.icon-shiyanshixuanzhong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouye2"></i>
                    <div class="name">首页</div>
                    <div class="fontclass">.icon-shouye2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rendashiyanshix1"></i>
                    <div class="name">实验室未选中</div>
                    <div class="fontclass">.icon-rendashiyanshix1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouyeweixuanzhong1"></i>
                    <div class="name">首页 未选中</div>
                    <div class="fontclass">.icon-shouyeweixuanzhong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wodex1"></i>
                    <div class="name">我的未选中</div>
                    <div class="fontclass">.icon-wodex1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kefu"></i>
                    <div class="name">客服</div>
                    <div class="fontclass">.icon-kefu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-suo1"></i>
                    <div class="name">锁</div>
                    <div class="fontclass">.icon-suo1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangyu"></i>
                    <div class="name">防御16</div>
                    <div class="fontclass">.icon-fangyu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fankui"></i>
                    <div class="name">反馈</div>
                    <div class="fontclass">.icon-fankui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangzhu"></i>
                    <div class="name">帮助</div>
                    <div class="fontclass">.icon-bangzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinshourumen"></i>
                    <div class="name">新手入门</div>
                    <div class="fontclass">.icon-xinshourumen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangzhang1"></i>
                    <div class="name">上涨</div>
                    <div class="fontclass">.icon-shangzhang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xia"></i>
                    <div class="name">下</div>
                    <div class="fontclass">.icon-xia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shang"></i>
                    <div class="name">上</div>
                    <div class="fontclass">.icon-shang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaofeiji"></i>
                    <div class="name">小飞机</div>
                    <div class="fontclass">.icon-xiaofeiji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pinpaijieshao"></i>
                    <div class="name">品牌介绍</div>
                    <div class="fontclass">.icon-pinpaijieshao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouyixuanzhong"></i>
                    <div class="name">收益选中</div>
                    <div class="fontclass">.icon-shouyixuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouyiweixuanzhong1"></i>
                    <div class="name">收益未选中</div>
                    <div class="fontclass">.icon-shouyiweixuanzhong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pinpaijieshao-copy"></i>
                    <div class="name">品牌介绍</div>
                    <div class="fontclass">.icon-pinpaijieshao-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouyixuanzhong-copy"></i>
                    <div class="name">收益选中</div>
                    <div class="fontclass">.icon-shouyixuanzhong-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouyiweixuanzhong1-copy"></i>
                    <div class="name">收益未选中</div>
                    <div class="fontclass">.icon-shouyiweixuanzhong1-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouyidefuben"></i>
                    <div class="name">收益</div>
                    <div class="fontclass">.icon-shouyidefuben</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouyixuanzhong1"></i>
                    <div class="name">收益 选中</div>
                    <div class="fontclass">.icon-shouyixuanzhong1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiahao"></i>
                    <div class="name">加号1</div>
                    <div class="fontclass">.icon-jiahao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi"></i>
                    <div class="name">关闭1</div>
                    <div class="fontclass">.icon-guanbi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-attention_forbid"></i>
                    <div class="name">attention_forbid</div>
                    <div class="fontclass">.icon-attention_forbid</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-attention_forbid1"></i>
                    <div class="name">attention_forbid</div>
                    <div class="fontclass">.icon-attention_forbid1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xin"></i>
                    <div class="name">心</div>
                    <div class="fontclass">.icon-xin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iicon"></i>
                    <div class="name">iicon</div>
                    <div class="fontclass">.icon-iicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icons"></i>
                    <div class="name">icons</div>
                    <div class="fontclass">.icon-icons</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiayibu"></i>
                    <div class="name">下一步</div>
                    <div class="fontclass">.icon-xiayibu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-laba"></i>
                    <div class="name">喇叭</div>
                    <div class="fontclass">.icon-laba</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paixu1"></i>
                    <div class="name">排序 2</div>
                    <div class="fontclass">.icon-paixu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paixu2"></i>
                    <div class="name">排序 (1)</div>
                    <div class="fontclass">.icon-paixu2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-paixu3"></i>
                    <div class="name">排序3</div>
                    <div class="fontclass">.icon-paixu3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaoyi"></i>
                    <div class="name">交易icon</div>
                    <div class="fontclass">.icon-jiaoyi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaoyixuanzhongicon"></i>
                    <div class="name">交易选中icon</div>
                    <div class="fontclass">.icon-jiaoyixuanzhongicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-riliicon"></i>
                    <div class="name">日历icon</div>
                    <div class="fontclass">.icon-riliicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-money"></i>
                    <div class="name">立即入金</div>
                    <div class="fontclass">.icon-money</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanhui1"></i>
                    <div class="name">返回</div>
                    <div class="fontclass">.icon-fanhui1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuhexiangqingicon"></i>
                    <div class="name">组合详情 icon</div>
                    <div class="fontclass">.icon-zuhexiangqingicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaoyifeiyongicon"></i>
                    <div class="name">交易费用icon</div>
                    <div class="fontclass">.icon-jiaoyifeiyongicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianxikefuicon"></i>
                    <div class="name">联系客服icon</div>
                    <div class="fontclass">.icon-lianxikefuicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-celvejiaoyiicon"></i>
                    <div class="name">策略交易icon</div>
                    <div class="fontclass">.icon-celvejiaoyiicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuanhuzhinanicon"></i>
                    <div class="name">转户指南icon</div>
                    <div class="fontclass">.icon-zhuanhuzhinanicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhanghuanquanicon"></i>
                    <div class="name">账户安全icon</div>
                    <div class="fontclass">.icon-zhanghuanquanicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-celvejiaoyiicon1"></i>
                    <div class="name">策略交易icon-选中-无色</div>
                    <div class="fontclass">.icon-celvejiaoyiicon1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhanghuanquanicon1"></i>
                    <div class="name">账户安全icon-选中-无色</div>
                    <div class="fontclass">.icon-zhanghuanquanicon1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rujinzhinanicon1"></i>
                    <div class="name">入金指南icon-选中-无色</div>
                    <div class="fontclass">.icon-rujinzhinanicon1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiaoyifeiyongicon1"></i>
                    <div class="name">交易费用icon-选中-无色</div>
                    <div class="fontclass">.icon-jiaoyifeiyongicon1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuanhuzhinanicon1"></i>
                    <div class="name">转户指南icon-选中-无色</div>
                    <div class="fontclass">.icon-zhuanhuzhinanicon1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lianxikefuicon1"></i>
                    <div class="name">联系客服icon-选中-无色</div>
                    <div class="fontclass">.icon-lianxikefuicon1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingcanghuoliicon1"></i>
                    <div class="name">平仓获利icon</div>
                    <div class="fontclass">.icon-pingcanghuoliicon1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kaihuzhinan-iocn1"></i>
                    <div class="name">开户指南-iocn</div>
                    <div class="fontclass">.icon-kaihuzhinan-iocn1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lajitong"></i>
                    <div class="name">垃圾桶</div>
                    <div class="fontclass">.icon-lajitong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-celveleixingicon"></i>
                    <div class="name">策略类型icon</div>
                    <div class="fontclass">.icon-celveleixingicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-touzifenggeicon"></i>
                    <div class="name">投资风格icon</div>
                    <div class="fontclass">.icon-touzifenggeicon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wancheng"></i>
                    <div class="name">完成</div>
                    <div class="fontclass">.icon-wancheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wancheng1"></i>
                    <div class="name">完成</div>
                    <div class="fontclass">.icon-wancheng1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuaxinx"></i>
                    <div class="name">刷新@3x</div>
                    <div class="fontclass">.icon-shuaxinx</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
